<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>注册-二手市场</title>
		<link id="layuicss-laydatecss" rel="stylesheet" href="css/laydate.css" media="all">
		<link id="layuicss-skinlayercss" rel="stylesheet" href="css/layer.css" media="all">
		<link id="layuicss-skincodecss" rel="stylesheet" href="css/code.css" media="all">
		<link rel="stylesheet" href="css/layui.css">

		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/login.css">
	</head>
	<body>
		<div id="app">
			<div id="header">
				<a href="/goods/index" class="logo"></a>
			</div>
			<div id="register-main" class="clearfix">
				<div class="layui-tab layui-tab-brief reg-left fl">
					<ul class="layui-tab-title">
						<li class="layui-this">手机号注册</li>
						<!-- <li>邮箱注册</li> -->
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show layui-form">
							<div class="layui-form-item">
								<input type="text" name="phone" autocomplete="off" placeholder="请输入常用手机号"
									class="layui-input phoneNum" v-model="phone">
							</div>
							<div class="layui-form-item captcha">
								<input type="text" name="captchaCode" autocomplete="off" placeholder="请输入图形验证码"
									class="layui-input captchaCode" v-model="captchaCode" />
								<img class="captchaImage" :src="image" title="点击刷新" @click="captcha()"/>
							</div>
<!--							<%&#45;&#45;-->
<!--                    <div class="layui-form-item phone">-->
<!--                        <input type="text" name="phoneCode" autocomplete="off" placeholder="请输入短信验证码"-->
<!--                               class="layui-input phoneCode" v-model="phoneCode">-->
<!--                        <a href="javascript:;" class="layui-btn get-phoneCode">获取验证码</a>-->
<!--                        <span class="showbox"></span>-->
<!--                    </div>-->
<!--                    &#45;&#45;%>-->
							<div class="layui-form-item">
								<input type="password" name="password" minlength="6" maxlength="20" autocomplete="off"
									placeholder="请输入密码" class="layui-input password" v-model="password" @blur="check_password()">
							</div>
							<div class="layui-form-item">
								<input type="password" name="rePassword" minlength="6" maxlength="20" autocomplete="off"
									placeholder="请输入确认密码" class="layui-input rePassword" v-model="rePassword" @blur="check_rePassword()">
							</div>
							<label class="layui-form-item check-wrap">
								<input type="checkbox" name="checkbox" class="checkbox" v-model="checkbox">我已阅读并同意 <a href="#"
									target="_blank">《二手市场用户协议》</a>
							</label>
							<a href="javascript:;" class="layui-btn register-btn" @click="register()">注 册</a>
						</div>
					</div>
				</div>
				<div class="reg-right right-box fr">
					<p>已有账号？</p>
					<a href="/tologin_user">立即登录</a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/common/axios.js"></script>
		<script type="text/javascript" src="js/common/vue.min.js"></script>
		<script type="text/javascript">
			let a = new Vue({
				el: "#app",
				data: {
					phone: '',
					captchaCode: '',
					phoneCode: '',
					password: '',
					rePassword: '',
					checkbox: false,
					image: ''
				},
				created(){
					this.captcha();
				},
				methods: {
					check_phone(){
						const _this = this;
						var phoneReg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
						if (_this.phone==''||_this.phone==undefined) {
							alert("请输入手机号");
							return false;
						} else if (!phoneReg.test(_this.phone)) {
							alert("手机号格式有误");
							return false;
						}
						return true;
					},
					check_password(){
						const _this = this;
						if (_this.password == '' || _this.password == undefined) {
							alert("请输入密码");
							return false;
						}
						return true;
					},
					check_rePassword(){
						const _this = this;
						if (_this.rePassword == '' || _this.rePassword == undefined) {
							alert("请再次输入密码");
							return false;
						}else{
							if(_this.rePassword!=_this.password){
								alert("两次密码输入不同，请重新输入密码");
								return false;
							}
						}
						return true;
					},
					captcha(){
						axios.post("/tocaptchaCode").then(res=> {
							res=res.data;
							if (res.code==1){
								this.image=res.data.image;
							}else{
								alert("获取验证码失败");
							}
						}).catch(function(error) {
							console.info(error);
						})
						return true;
					},
					check_checkbox(){
						const _this = this;
						if(!_this.checkbox){
							alert("请先勾选同意协议");
							return false;
						}
						return true;
					},
					register(){
						const _this = this;
						if(!(_this.check_phone()&&_this.check_password()&&_this.check_rePassword()&&_this.check_checkbox())){
							return ;
						}
						let params = new URLSearchParams();
						params.append('captchaCode', _this.captchaCode);
						params.append('phone',_this.phone);
						params.append('password',_this.password);
						axios.post("/user/register", params).then(res=> {
							res = res.data;
							if (res.code == 1) {
								alert("注册成功");
								axios.post("/tologin_user",params);
							} else {
								alert(res.msg);
							}
						}).catch(function(error) {
							console.info(error);
						})
						return true;
					}
				},
			})
		</script>
	</body>
</html>
